const { createApp } = Vue;
import { useState, useReducer, useReactive } from './vue-hooks';

const App = {
  template: `
    <!-- useState写法模版 -->
    <!-- <h1>{{ count }}</h1>
    <button @click="setCount((count) => count.value + 2)">plus</button>
    <button @click="setCount(count - 1)">minus</button> -->

    <!-- useReducer写法模版 -->
    <!-- <h1>{{count}}</h1>
    <button @click="countDispatch({ type: 'plus', payload: 2 })">plus</button>
    <button @click="countDispatch({ type: 'minus', payload: 1 })">minus</button> -->

    <!-- useReactive写法模版 -->
    <h1>{{name}}</h1>
    <h1>{{age}}</h1>
    <button @click="setInfo('age', 30)">set</button> 
    <button @click="setInfo('age', (age) => age = 21)">set</button>
    <button @click="setInfo({ name: 'icy', age: 18 })">set</button> 
  `,
  setup() {
    //--------- useState ------------
    //集成了数据和修改数据的方法，开箱即用
    // const [ count, setCount ] = useState(0);
    // return { count, setCount }
    //
    //--------- useReducer ----------
    // const [count, countDispatch] = useReducer(
    //   (count, setCount, { type, payload }) => {
    //     switch (type) {
    //       case 'plus':
    //         setCount((count.value += payload));
    //         break;
    //       case 'minus':
    //         setCount((count.value -= payload));
    //         break;
    //       default:
    //         break;
    //     }
    //   },
    //   100
    // );
    // return { count, countDispatch };
    //
    //--------- useReactive ----------
    const [info, infoRefs, setInfo] = useReactive({
      name: 'lulu',
      age: 20
    });

    return {
      info,
      ...infoRefs,
      setInfo
    };
  }
};

const app = createApp(App);
app.mount('#app');
